<template>
  <div class="tab-content">
    <div class="sub-tab-box">
      <van-tabs title-inactive-color="#999999" v-model="active" type="card">
        <van-tab title="AI一组线索转化" disabled> </van-tab>
        <van-tab title="AI二组线索转化"> </van-tab>
      </van-tabs>
    </div>
    <div class="time-tab-box">
      <van-tabs @change="handleChange" color="#409EFF" title-active-color="#409EFF" v-model="activeTime">
        <van-tab title="全部"> </van-tab>
        <van-tab title="昨天"> </van-tab>
        <van-tab title="今天"> </van-tab>
        <van-tab title="本周"> </van-tab>
        <van-tab title="本月"> </van-tab>
        <van-tab title="今年"> </van-tab>
      </van-tabs>
    </div>
    <div class="tab-content" v-if="tabData">
      <!-- <div class="echarts-box">
        <div id="echarts2"></div>
      </div> -->
      <div class="funnel-list">
        <div class="item">
          <div class="text">
            <div class="name">AI推送数据</div>
            <div class="value">{{ tabData.ai_total }}</div>
          </div>
        </div>
        <div class="item">
          <div class="text">
            <div class="name">电话回访</div>
            <div class="value">{{ tabData.phone_follow_total }}</div>
          </div>
          <div class="percent">{{ percent(tabData.phone_follow_total, tabData.ai_total) }}%</div>
        </div>
        <div class="item">
          <div class="text">
            <div class="name">有效数据</div>
            <div class="value">{{ tabData.effect_total }}</div>
          </div>
          <div class="percent">{{ percent(tabData.effect_total, tabData.phone_follow_total) }}%</div>
        </div>
      </div>
      <div class="data-list">
        <div class="item">
          <div class="value">{{ tabData.self_total }}</div>
          <div class="name">独享</div>
        </div>
        <div class="item">
          <div class="value">{{ tabData.pub_total }}</div>
          <div class="name">发布资产</div>
        </div>
        <div class="item">
          <div class="value">{{ tabData.no_talk_total }}</div>
          <div class="name">未接通</div>
        </div>
      </div>
      <!-- 排名 -->
      <div class="rank-box">
        <div class="title">员工排名</div>
        <div class="rank-list">
          <div class="item">
            <div class="name">{{ (tabData.user_order && tabData.user_order[1] && tabData.user_order[1].follow_man) || '--' }}</div>
            <div class="podium">
              <p class="text1">NO.2</p>
              <p class="text2">{{ (tabData.user_order && tabData.user_order[1] && tabData.user_order[1].total) || '--' }}条</p>
            </div>
          </div>
          <div class="item">
            <div class="name">{{ (tabData.user_order && tabData.user_order[0] && tabData.user_order[0].follow_man) || '--' }}</div>
            <div class="podium">
              <p class="text1">NO.1</p>
              <p class="text2">{{ (tabData.user_order && tabData.user_order[0] && tabData.user_order[0].total) || '--' }}条</p>
            </div>
          </div>
          <div class="item">
            <div class="name">{{ (tabData.user_order && tabData.user_order[2] && tabData.user_order[2].follow_man) || '--' }}</div>
            <div class="podium">
              <p class="text1">NO.3</p>
              <p class="text2">{{ (tabData.user_order && tabData.user_order[2] && tabData.user_order[2].total) || '--' }}条</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="button" @click="handleDetail">线索转化明细</div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'clueConversion',
  props: {
    tabData: Object,
  },
  data() {
    return {
      myEcharts: '',
      active: 1,
      activeTime: 0,
    }
  },
  created() {},
  mounted() {
    // this.initEcharts()
  },
  methods: {
    initEcharts() {
      this.myEcharts = echarts.init(document.getElementById('echarts2'))
      var option = {
        tooltip: {},
        series: [
          {
            type: 'funnel',
            width: '70%',
            left: 0,
            top: 0,
            data: [
              { name: 'AI推送数据', value: 100 },
              { name: '电话回访', value: 80 },
              { name: '有效数据', value: 40 },
            ],
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myEcharts.setOption(option)
    },
    // 线索转化明细
    handleDetail() {
      this.$toast('暂未开通')
    },
    // 百分数
    percent(a, b) {
      if (a === 0 || b === 0) {
        return 0
      } else {
        return parseInt((a / b) * 100)
      }
    },
    // 切换tab
    handleChange(index) {
      this.$emit('timeTab', index)
    },
  },
}
</script>

<style scoped lang="scss">
.tab-content {
  width: 100%;
  padding: 30rpx 24rpx;
}

.time-tab-box {
  margin-top: 20rpx;
}

.tab-content {
  .funnel-list {
    .item {
      position: relative;
      height: 150rpx;
      margin-bottom: 4rpx;
      .text {
        text-align: center;
        position: absolute;
        padding-top: 50rpx;
        color: #ffffff;
        .name {
          margin-bottom: 6rpx;
        }
      }
      .percent {
        position: relative;
        color: #409eff;
        width: 100%;
        text-align: right;
        padding-right: 20rpx;
        top: -12rpx;
        &::before {
          content: '';
          position: absolute;
          right: 100rpx;
          top: 10rpx;
          width: 200rpx;
          height: 1px;
          background: #409eff;
        }
      }

      &::before {
        content: '';
        position: absolute;
        height: 0;
        border: 150rpx solid transparent;
        border-left-width: 50rpx;
        border-right-width: 50rpx;
        border-top-color: #409eff;
      }
      &:nth-child(1) {
        .text {
          width: 400rpx;
        }
        &::before {
          width: 400rpx;
          left: 0;
        }
      }
      &:nth-child(2) {
        .text {
          width: 300rpx;
          left: 50rpx;
        }
        &::before {
          width: 300rpx;
          left: 50rpx;
          border-top-color: #67c23a;
        }
      }
      &:nth-child(3) {
        .text {
          width: 200rpx;
          left: 100rpx;
        }
        &::before {
          width: 200rpx;
          left: 100rpx;
          border-top-color: #e6a23c;
        }
        .percent {
          padding-right: 70rpx;
          &::before {
            right: 150rpx;
          }
        }
      }
    }
  }
  .data-list {
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 1px solid #409eff;
      border-radius: 6rpx;
      width: 180rpx;
      height: 100rpx;
      margin-right: 20rpx;
      &:last-child {
        margin-right: 0;
      }
      .name {
        font-size: 22rpx;
        margin-top: 10rpx;
      }
      .value {
        font-size: 30rpx;
        color: #409eff;
        font-weight: bold;
      }
    }
  }
  .rank-box {
    margin-top: 30rpx;
    .title {
      font-size: 30rpx;
      font-weight: bold;
    }
    .rank-list {
      margin-top: 30rpx;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      .item {
        width: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        .name {
          color: #409eff;
          font-weight: bold;
        }
        .podium {
          margin-top: 10rpx;
          width: 100%;
          height: 200rpx;
          background: #409eff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #ffffff;
          .text1 {
            font-size: 30rpx;
            margin: 0;
            margin-bottom: 10rpx;
          }
          .text2 {
            margin: 0;
          }
        }
        &:first-child {
          .podium {
            height: 150rpx;
            background: #67c23a;
          }
        }
        &:last-child {
          .podium {
            height: 100rpx;
            background: #e6a23c;
          }
        }
      }
    }
  }
  .button {
    margin-top: 50rpx;
    width: 100%;
    height: 80rpx;
    background: #409eff;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    font-size: 30rpx;
  }
}

::v-deep .sub-tab-box .van-tabs__nav.van-tabs__nav--card {
  border-color: #409eff;
}
::v-deep .sub-tab-box .van-tab.van-tab--active {
  background-color: #409eff;
  border-color: #409eff;
}
::v-deep .sub-tab-box .van-tab {
  border-color: #409eff;
}

#echarts2 {
  margin-top: 20rpx;
  width: 100%;
  height: 400rpx;
}
</style>
